<template>
    <div style="padding-bottom: 60px">
        <header class="base-header">
            <i class="link-icon" @tap='back'></i>
            <h1 class="edit">编辑收货地址</h1>
        </header>
        <form class="mui-input-group address-edit">
            <div class="mui-input-row">
                <label>收货人</label>
                <input type="text" maxLength='15' v-on:input="checkedText" class="mui-input-clear" v-model="data.address.receiverName" placeholder="请输入姓名">
            </div>
            <div class="mui-input-row">
                <label>联系电话</label>
                <input type="tel" maxLength='11' oninput="if(value.length>11)value=value.slice(0,11)" class="mui-input-clear" v-model="data.address.receiverPhone" placeholder="请输入联系电话">
            </div>
            <div class="mui-input-row address-line-icon" @tap='showPick'>
                <label>所在地区</label>
                <div style='padding:10px 0px;' class="mui-input-clear"  >{{data.address.province + data.address.city + data.address.region}}</div>
                <i class="mui-icon mui-icon-arrowright"></i>
            </div>
            <div class="mui-input-row textarea">
                <label>详细地址</label>
                <textarea class="mui-input-clear" v-model="data.address.detailAddress" placeholder="请输入详细地址"></textarea>
            </div>
        </form>
        <div class="edit-fixed-btn" @tap='save'>保存</div>
    </div>
</template>
<script>
  import store from '../we-store';
  require('../../public/js/citydata.js');
  export default {
    data: function () {    // 组件的数据格式
      return {
        data: store.state,
        picker: {}
      };
    },
    props: ['num', 'lev1', 'lev2'],
    created: function () {
      var id = this.$route.params.id;
      store.getAddressId(id);
    },
    ready: function () {
    },
    watch: {
      $route: function (to) {
        var id = to.params.id;
        store.getAddressId(id);
      }
    },
    methods: {
      checkedText: function (val) {
        val.target.value = val.target.value.replace(/[`']/g, '');
        val.target.value = val.target.value.replace(/[`'\[]/g, '');
        val.target.value = val.target.value.replace(/[`\]]/g, '');
        val.target.value = val.target.value.replace(/[`~!@#$%^&*()=|{}:;,.<>\/?~！@#￥……&*（）——|{}【】‘；：”“。，、？]/g, '');
        if (val.target.value.length > 15) {
          val.target.value = val.target.value.slice(0, 15);
        }
      },
      save: function () {
        var id = this.$route.params.id;
        store.saveAddress(id);
      },
      back: function () {
        window.history.go(-1);
      },
      showPick: function () {
        var picker = new mui.PopPicker({layer: 3});
        picker.setData(window.cityData3);
        picker.show(function (selectItems) {
          store.setAddress(selectItems[0].text, selectItems[1].text, selectItems[2].text || '');
        });
      }
    }
  };
</script>